namespace XYZ{    
    export function OnLoad(load:()=>any){
          window.addEventListener("load",function(e){
              load();
          });
    }
    export function OnWindowResize(resize:(e:any)=>any){
         window.addEventListener("resize",function(e){
                resize(e);
            },false);  
    }
    export class XYZArray{
        all = {};
        id = 0;
        add(obj:any){
            this.id = this.id + 1;           
            this.all[this.id] = obj;            
        }        
        each(ac:(id:any,d:any)=>any){
            for (var key in this.all) {                
                var item = this.all[key];
                ac(key,item);
            }
        }
        remove(id:number){
            if(this.all[id]){
                delete this.all[id];
            }
       }
    }
    export class Play{
        body:HTMLBodyElement;
        canvas:HTMLElement;
        constructor(){               
             
        }
        init(canvasId:string){
            this.body = document.getElementsByTagName("body")[0]; 
            this.canvas = document.getElementById(canvasId);    
            this.setCanvasWH();
        }
        setCanvasWH(){
            this.canvas.setAttribute("width", window.innerWidth.toString());
            this.canvas.setAttribute("height", window.innerHeight.toString());
        }
    }
    export class Point{
        X:number;
        Y:number;
        V:number;
        constructor(x:number,y:number){
            this.X = x;
            this.Y = y;
        }
       static random(maxX:number,maxY:number){           
            var x = Math.random() * maxX;
            var y = Math.random() * maxY;
            return new Point(x,y);
        }
    }
    export class Circle{
        X:number;
        Y:number;
        Radius:number;
        r:number;
        g:number;
        b:number;
        a:number;               
        Ctx:CanvasRenderingContext2D;
        
        constructor(ctx:CanvasRenderingContext2D,x:number,y:number,radius:number){
            this.X = x;
            this.Y = y;
            this.Radius = radius;            
            this.Ctx = ctx;
            this.a = 1;
        }
        update(){
            if(this.Radius<1){
                this.Radius = 1;
            }else{
                this.Radius = this.Radius - 0.2;
            }
        }
        draw(){
            var color = "rgba("+this.r+","+this.g+","+this.b+","+this.a+")";
            this.Ctx.fillStyle = color;   
            this.Ctx.beginPath();         
            this.Ctx.moveTo(this.X,this.Y);
            this.Ctx.arc(this.X,this.Y,this.Radius,0,Math.PI*2,true);  
            this.Ctx.fill();         
        }        
    }
    export class Particle{
        age:number;
        lifetime:number;        
        direction:Point;
        place:Point; 
        graph:any;
        die:boolean;       
        constructor(place:Point,life:number,dc:Point){
            this.lifetime = life;            
            this.direction = dc;
            this.place = place;
            this.age = 0;
            this.die = false;
        }
        update(){
            this.age = this.age + 1;
            this.place.X = this.place.X+this.direction.X;
            this.place.Y = this.place.Y+this.direction.Y;
            this.graph.update();
            if (this.graph.Radius <= 1) {
                this.die = true;
            }
            this.graph.a = (this.lifetime-this.age)/this.lifetime;
            if(this.age>this.lifetime){
                this.die = true;
            }            
        }
        draw(){
            if (this.graph) {
                this.graph.X = this.place.X;
                this.graph.Y = this.place.Y;
                this.graph.draw();
            }
        }
    }
    export class Game{
        CTX:CanvasRenderingContext2D;
        Canvas:HTMLCanvasElement;        
        AudioArray:any;
        times:number;
        constructor(id:string){
            this.Canvas= document.getElementById(id) as HTMLCanvasElement;
            this.CTX = this.Canvas.getContext('2d');            
        }
        cs:XYZArray;        
        init(){
           this.cs = new XYZArray();
           this.times = 0;
        }
        
        update(){                     
            var w = this.Canvas.width;
            var h = this.Canvas.height;
            var thisObj = this;          
            var ysu = 0;
            this.cs.each(function(id,item){
                ysu = ysu + 1;                
                if (item.die) {
                   thisObj.cs.remove(id);                   
               }else{                   
                   item.update();
               }
            });
            //console.log(ysu);
          
            var tpMax = 0;
            for ( var i = 0; i < (this.AudioArray.length); i++ ){ 
                var value = this.AudioArray[i]; 
                if(value > 0){
                     var g1 = this.CTX.createLinearGradient(0, 0, 0, h);
                     g1.addColorStop(1, 'rgb(0,255,0)');//绿
                     g1.addColorStop(0.7, 'yellow');//
                     g1.addColorStop(0, 'rgb(255,0,0)'); //红  
                     this.CTX.fillStyle = g1;
                     this.CTX.fillRect(i*5, h, 3, h-value);　
                }
                if(value > tpMax){
                    tpMax = value;                    
                }
            }
            if(tpMax > 0){                
                var x = Math.random() * w;
                var y = Math.random() * h;
                var c = new Circle(this.CTX,x,y,Math.random() * (tpMax/4));
                c.r = Math.floor(Math.random() * 255);
                c.g = Math.floor(Math.random() * 255);
                c.b = Math.floor(Math.random() * 255);
                var p = new Particle(new Point(c.X,c.Y),tpMax,new Point(Math.random()*4-2,Math.random()*4-2));
                p.graph = c;
                this.cs.add(p);
          }               
        }
        render(){
           var w = this.Canvas.width;
           var h = this.Canvas.height;
           //console.log("w:"+w+",H:"+h);
           this.CTX.clearRect(0, 0, w, h);            
           this.cs.each(function(id,item){              
                item.draw();               
           });
        }
        run(){            
            this.update();
            this.render();           
        }
    }
    
}